<template>
  <div class="home">
    <!-- 头部banner -->
    <div class="wrap banner">
      <img src="../assets/img/banner.f559b49d.png" alt="" />
    </div>

    <!-- 精品推荐 -->
    <div class="recommend">
      <!-- 标题 -->
      <div class="rec-title wrap">
        <h1><img src="../assets/img/jingpin.png" alt="" />精品推荐</h1>
        <p @click="$router.push('/goods')">
          更多<img src="../assets/img/arrow.png" alt="" />
        </p>
      </div>
      <!-- 商品图片 -->
      <ul class="rec-pic wrap">
        <li v-for="item in JingpinArr" :key="item.id">
          <img
            v-show="item.isHotSale"
            class="hot"
            src="../assets/img/section_hot.png"
            alt=""
          />
          <img
            class="item"
            :src="`http://sc.wolfcode.cn${item.coverImg}`"
            alt=""
          />
          <p>{{ item.name }}</p>
          <strong>{{ item.coin }}</strong>
          <img class="leg" src="../assets/img/monad.png" alt="" />
          <button>立即兑换</button>
        </li>
      </ul>
    </div>

    <!-- 热门兑换 -->
    <div class="recommend">
      <!-- 标题 -->
      <div class="rec-title wrap">
        <h1><img src="../assets/img/jingpin.png" alt="" />热门兑换</h1>
        <p @click="$router.push('/goods')">
          更多<img src="../assets/img/arrow.png" alt="" />
        </p>
      </div>
      <img class="hotbanner" src="../assets/img/banner.4c6b6225.png" alt="" />
      <!-- 商品图片 -->
      <ul class="rec-pic wrap hot-wrap">
        <li v-for="item in RemenArr" :key="item.id">
          <img
            v-show="item.isHotSale"
            class="hot"
            src="../assets/img/section_hot.png"
            alt=""
          />
          <img
            class="item"
            :src="`http://sc.wolfcode.cn${item.coverImg}`"
            alt=""
          />
          <p>{{ item.name }}</p>
          <strong>{{ item.coin }}</strong>
          <img class="leg" src="../assets/img/monad.png" alt="" />
          <button>立即兑换</button>
        </li>
      </ul>
    </div>

    <!-- 积分攻略 -->
    <div class="score wrap">
      <h1 class="score-til">
        <img src="../assets/img/score.png" alt="" />
        积分攻略
      </h1>
      <ul class="way">
        <li>
          <img src="../assets/img/integral-01.9386d4bf.png" alt="" />
          <div>
            <p>签到得积分</p>
            <span>去签到</span>
          </div>
        </li>
        <li>
          <img src="../assets/img/integral-02.150d92a1.png" alt="" />
          <div>
            <p>购课得积分</p>
            <span>去购课</span>
          </div>
        </li>
        <li>
          <img src="../assets/img/integral-03.9870f3f1.png" alt="" />
          <div>
            <p>推荐得积分</p>
            <span>去推荐</span>
          </div>
        </li>
        <li>
          <img src="../assets/img/integral-04.afadcbdf.png" alt="" />
          <div>
            <p>拼团得积分</p>
            <span>去拼团</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { JingpinAPI, RemenAPI } from "@/request/Api";

export default {
  data() {
    return { JingpinArr: [], RemenArr: [] };
  },
  async created() {
    let Jingpinres = await JingpinAPI();
    this.JingpinArr = Jingpinres.data.data.data.records;
    // console.log(this.JingpinArr);

    let Remenres = await RemenAPI();
    this.RemenArr = Remenres.data.data.data.records;
    // console.log(this.RemenArr);

    // console.log(this.RemenArr[1].isHotSale);
  },
};
</script>

<style lang="less" scoped>
// 头部banner
.banner {
  display: block;
  margin: 0 auto 30px;
}
// 推荐和兑换
.recommend {
  background: #f5f5f5;

  .hotbanner {
    display: block;
    margin: 20px auto;
  }
  .hot-wrap {
    flex-wrap: wrap;
  }
  .rec-title {
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    h1 {
      font-size: 30px;
      font-weight: bold;
      img {
        margin-right: 10px;
      }
    }
    p {
      color: #666666;
      cursor: pointer;
      img {
        margin-left: 10px;
      }
    }
  }
  .rec-pic {
    display: flex;
    justify-content: space-between;
    li {
      width: 285px;
      height: 412px;
      text-align: center;
      position: relative;
      background-color: #fff;
      line-height: 40px;
      transition: 0.5s;
      margin-bottom: 20px;
      cursor: pointer;
      &:hover {
        transform: translateY(-10px);
      }
      .hot {
        position: absolute;
        left: 0;
        top: 0;
      }
      .item {
        width: 285px;
        height: 250px;
      }
      .leg {
        width: 25px;
        vertical-align: middle;
      }
      strong {
        font-size: 18px;
        font-weight: bold;
        color: #ff5e0f;
      }
      button {
        width: 100px;
        height: 36px;
        border: 1px solid #0a328e;
        color: #0a328e;
        background-color: #fff;
        display: block;
        margin: 20px auto;
        cursor: pointer;
        &:hover {
          background-color: #0a328e;
          color: #fff;
        }
      }
    }
  }
}

// 积分攻略
.score {
  margin-bottom: 40px;
}
.score-til {
  height: 100px;
  line-height: 100px;
  font-size: 30px;
  font-weight: bold;
  img {
    vertical-align: middle;
  }
}
.way {
  display: flex;
  justify-content: space-between;

  li {
    width: 285px;
    height: 168px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    &:hover {
      img {
        transform: scale(1.1);
      }
    }
    img {
      transition: 0.5s;
    }
    div {
      position: absolute;
      left: 24px;
      top: 40px;

      color: #fff;
      p {
        font-size: 30px;
        margin-bottom: 30px;
      }
      span {
        padding: 6px 23px;
        border: 1px solid #fff;
      }
    }
  }
}
</style>
